<template>
  <div class="pie-chart-container" v-loading="loading">
    <!-- 暂无数据 -->
    <noData
      v-show="isNoData"
      :title="title"
      :sub-title="params.organizationName.value"
      :year="params.queryParams.inventoryYear"
    />
    <!-- 饼图 -->
    <div v-show="!isNoData" class="chart-box">
      <div class="chart-title">
        <p class="title">{{ title }}(单位: t CO₂e)</p>
        <p class="sub-title"
          ><span>{{ params.organizationName.value }}</span>
          <el-divider v-if="params.queryParams.inventoryYear" direction="vertical" />
          <span v-if="params.queryParams.inventoryYear"
            >{{ params.queryParams.inventoryYear }}年</span
          >
        </p>
      </div>
      <GroupPieChart :pieData="pieData" v-if="orgType === 'GROUP' && pieData?.length" />
      <FactoryBarChart
        :factoryBarData="factoryBarData"
        v-if="orgType === 'FACTORY' && factoryBarData?.length"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, inject, watch, defineProps, computed, ComputedRef, onMounted, Ref } from 'vue';
import noData from '../../../noData/index.vue';
import { queryOrgAnalysis } from '@/apis/eci/visualAnalysis';
import {
  queryAnalysisParams,
  queryOrgAnalysisPieRes
} from '@/apis/eci/visualAnalysis/model/visualAnalysisModel';
import { kgToT } from '@/utils';
import GroupPieChart from './components/GroupPieChart/index.vue';
import FactoryBarChart from './components/FactoryBarChart/index.vue';

interface injectParams {
  queryParams: queryAnalysisParams;
  organizationName: ComputedRef;
  orgType: Ref<'GROUP' | 'FACTORY'>;
}
const props = defineProps(['month']);
const loading = ref(false);
const pieData = ref<queryOrgAnalysisPieRes[]>([]);
const factoryBarData = ref<queryOrgAnalysisPieRes[]>([]);
const params = inject('params') as injectParams;
/**
 * 组织类型 集团|工厂
 */
const orgType = computed(() => {
  return params.orgType.value || 'GROUP';
});
/**
 * 标题
 */
const title = computed(() => {
  return orgType.value === 'FACTORY' ? '工厂车间排放分布分析' : '碳排放量按组织分布分析';
});
// 监听(集团，年份，标准)是否发生改变，改变重置 Echart
// 监听月份是否发生改变，改变重置 Echart
watch([() => props.month, params.queryParams], () => {
  loadPieData();
});
const isNoData = computed(() => {
  if (orgType.value === 'FACTORY') {
    return !factoryBarData.value?.length;
  }
  if (pieData.value) {
    return pieData.value.length === 0;
  } else {
    return true;
  }
});

// 请求饼图数据
const loadPieData = async () => {
  try {
    if (params.queryParams.inventoryYear) {
      loading.value = true;
      const res: queryOrgAnalysisPieRes[] = await queryOrgAnalysis({
        ...params.queryParams,
        dataPeriod: props.month
      });
      const resData =
        res
          ?.map(item => {
            return {
              name: item.name,
              organizationCode: item.organizationCode,
              totalEmissionRate: item.totalEmissionRate,
              value: kgToT(Number(item.value))
            };
          })
          ?.sort((a, b) => Number(b.totalEmissionRate) - Number(a.totalEmissionRate)) || [];
      if (orgType.value === 'FACTORY') {
        pieData.value = [];
        factoryBarData.value = resData;
      } else {
        factoryBarData.value = [];
        pieData.value = resData;
      }
    }
  } catch (error) {
    console.log(error);
    factoryBarData.value = [];
    pieData.value = [];
  } finally {
    loading.value = false;
  }
};
onMounted(() => {
  loadPieData(); // 请求饼图数据
});
</script>

<style lang="scss" scoped>
.pie-chart-container {
  width: 100%;
  height: 100%;
  margin-right: 16px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(67, 89, 112, 0.08);
  border-radius: 6px;

  .chart-box {
    width: 100%;
    height: 100%;
    .chart-title {
      height: 70px;
      padding: 13px 20px;
      border-bottom: 1px solid #ebeff2;
      .title {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 700;
        color: #0a1f33;
        line-height: 22px;
      }
      .sub-title {
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #7a8a99;
        line-height: 20px;
      }
    }
  }
}
</style>
